<template>
  <div>
    <div class="block rqkuan">
      <span class="demonstration">查询日期范围: </span>
      <el-date-picker v-model="oneDate" type="date" placeholder="选择日期">
      </el-date-picker>
      <span class="demonstration"> 到 :</span>
      <el-date-picker v-model="towDate" type="date" placeholder="选择日期">
      </el-date-picker>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="onRecords()"
          >搜索</el-button
        >
      </div>
    </div>

    <el-table
      style="width: 1100px; margin: auto"
      :data="RecordsTable"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="transactionDate" label="交易日期" width="300px">
      </el-table-column>
      <el-table-column prop="amout" label="支出/存入" width="200">
      </el-table-column>
      <el-table-column prop="balance" label="账户余额" width="200">
      </el-table-column>
      <el-table-column prop="transactionType" label="交易类型" width="200">
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="200">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getRecord } from "../../api/records";
export default {
  name: "deal",
  data() {
    return {
      oneDate: null,
      towDate: null,
      RecordsTable: [],
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    async getRecords() {
      let result = await getRecord(
        localStorage.getItem("cardNo"),
        this.oneDate,
        this.towDate
      );
      console.log(result);
      this.RecordsTable = result.data.records.data.record;
    },
    onRecords() {
      this.getRecords();
    },
  },
};
</script>

<style >
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.rqkuan {
  margin: auto;
  width: 800px;
  display: flex;
  justify-content: space-around;
}
</style>